<template>
    <div class="divider-header">
        <div class="divider-header-title">
            <span class="title-text">{{ title }}</span>
        </div>
    </div>
</template>

<script setup>
const {title} = defineProps(['title'])
</script>

<style scoped lang="scss">
.divider-header {
    position: relative;
    margin-bottom: 1.25rem;

    .divider-header-title {

        position: relative;
        overflow: hidden;
        color: var(--el-color-primary);

        &:before {
            content: " ";
            position: absolute;
            background: var(--el-color-primary);
            top: 0;
            bottom: 0;
            width: 0.3125rem;
            border-radius: 0.125rem;
        }
    }

    .title-text {
        margin-left: 0.625rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
</style>